<template>
  <div class="box">
    <div class="searchbox">
      <a-form layout="inline">
        <a-form-item label="连接地址">
          <a-input-search
            style="width: 500px"
            placeholder="流媒体地址"
            default-value="ws://localhost:8080/"
            @search="onConnect"
          >
            <a-button slot="enterButton" type="primary">
              <a-icon type="api" />连接
            </a-button>
          </a-input-search>
        </a-form-item>
      </a-form>
    </div>
    <div class="videobox">
      <div class="video">
        <VideoPlayer :address="videoWS"></VideoPlayer>
      </div>
    </div>
  </div>
</template>

<script>
import VideoPlayer from "@/components/WorkerPlayer/Index.vue";

export default {
  data() {
    return {
      videoWS: null,
    };
  },
  components: {
    VideoPlayer,
  },
  methods: {
    onConnect(value) {
      this.videoWS = value;
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: white;

  .searchbox {
    height: 50px;
  }

  .videobox {
    width: 100%;
    height: calc(100% - 50px);
    display: inline-flex;
    flex-direction: column;

    .video {
      width: 100%;
      height: 100%;
      background-color: #242731;
    }
  }
}
</style>
